<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.title" :placeholder="$t('table.title')" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <!-- <el-select v-model="listQuery.importance" :placeholder="$t('table.importance')" clearable style="width: 90px" class="filter-item">
        <el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />
      </el-select> -->
      <el-select v-model="listQuery.type" :placeholder="$t('table.type')" clearable class="filter-item" style="width: 130px">
        <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key" />
      </el-select>
      <el-select v-model="listQuery.sort" style="width: 140px" class="filter-item" @change="handleFilter">
        <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        {{ $t('table.search') }}
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="basic_msg"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      :row-class-name="tableRowClassName"
      @sort-change="sortChange"
    >
      <el-table-column :label="$t('table.id')" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" width="200px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="200px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.timestamp }}</span>
        </template>
      </el-table-column>
      <el-table-column label="描述" min-width="100px">
        <template slot-scope="{row}">
          <span>{{ row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column label="缩略图" style="overflow: hidden;width:100%;height:0;padding-bottom: 20%">
        <template slot-scope="{row}">
          <el-image v-if="row.pic_url" :src="row.pic_url" width="100%" :preview-src-list="[row.pic_url]" />
        </template>
      </el-table-column>
      <el-table-column label="模型状态" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <el-tag :type="row.status | statusFilter">
            {{ row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.actions')" align="center" width="300" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button type="text" @click="handleRow(row)">点击展示结果统计</el-button>
        </template>
      </el-table-column>

    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <el-dialog
      title="结果统计一览"
      :modal-append-to-body="false"
      :visible.sync="newDialogFormVisible"
      append-to-body
      height="70%"
      width="70%"
      @open="open(current_result_idx)"
    >
      <el-form :inline="true" size="medium" label-width="80px" style="text-align: center">
        <el-form-item style="text-align: center">
          <div id="newEcharts" style="width:400px;height:400px;padding-top:40px" />
        </el-form-item>
        <el-form-item style="text-align: center">
          <div id="newEcharts_Bar" style="width:400px;height:400px;padding-top:40px" />
        </el-form-item>
        <el-form-item style="text-align: center">
          <div id="newEcharts_Tree" style="width:500px;height:400px;padding-top:40px" />
        </el-form-item>
      </el-form>

    </el-dialog>
  </div>
</template>

<script>
import { fetchPv, createArticle, updateArticle } from '@/api/article' // fetchList,
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import * as echarts from 'echarts'
// import { int } from 'mockjs/src/mock/random/basic'
const calendarTypeOptions = [
  { key: 'CN', display_name: 'China' },
  { key: 'US', display_name: 'USA' },
  { key: 'JP', display_name: 'Japan' },
  { key: 'EU', display_name: 'Eurozone' }
]

// arr to obj, such as { CN : "China", US : "USA" }
const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name
  return acc
}, {})

export default {
  name: 'ComplexTable',
  components: { Pagination },
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        Published: 'success',
        draft: 'info',
        Deleted: 'danger'
      }
      return statusMap[status]
    },
    typeFilter(type) {
      return calendarTypeKeyValue[type]
    }
  },
  data() {
    return {
      current_result_idx: -1,
      newVisible: false,
      newDialogFormVisible: false,
      data_list: [[{ '商品名称': [{ 'text': '氢疯吡格量（波立）片', 'start': 288, 'end': 298, 'probability': 0.872822480753328, 'bbox': [[104, 587, 377, 621]] }, { 'text': '硫酸氨啦格雷（立维）片', 'start': 311, 'end': 322, 'probability': 0.9241934403890895, 'bbox': [[101, 660, 377, 694]] }], '规格': [{ 'text': '75407片/盒', 'start': 251, 'end': 259, 'probability': 0.8075640749973374, 'bbox': [[565, 582, 693, 616]] }, { 'text': '75G7/盒', 'start': 324, 'end': 330, 'probability': 0.7169840783006549, 'bbox': [[565, 658, 693, 692]] }], '数量': [{ 'text': '38,983.00', 'start': 262, 'end': 271, 'probability': 0.9143903725636875, 'bbox': [[932, 573, 1067, 616]] }], '单位': [{ 'text': 'BOX', 'start': 259, 'end': 262, 'probability': 0.9929093875300445, 'bbox': [[787, 577, 836, 616]] }, { 'text': 'BOX', 'start': 330, 'end': 333, 'probability': 0.9953449988811514, 'bbox': [[787, 655, 838, 690]] }], '件数': [{ 'text': '108.281', 'start': 244, 'end': 251, 'probability': 0.9356312495061161, 'bbox': [[1112, 557, 1232, 634]] }], '编号': [{ 'text': '7102248', 'start': 74, 'end': 81, 'probability': 0.9870820595871912, 'bbox': [[195, 284, 298, 327]] }], '有效期': [{ 'text': '2019-12-31', 'start': 276, 'end': 286, 'probability': 0.6246257012192906, 'bbox': [[1509, 575, 1654, 609]] }, { 'text': '2019-18-01', 'start': 301, 'end': 311, 'probability': 0.8236334377369872, 'bbox': [[1506, 640, 1655, 688]] }, { 'text': '2017-07-03', 'start': 551, 'end': 561, 'probability': 0.9478696774044693, 'bbox': [[56, 2024, 235, 2071]] }], '剂型': [{ 'text': '片剂', 'start': 322, 'end': 324, 'probability': 0.6636148941765896, 'bbox': [[425, 658, 483, 694]] }, { 'text': '片剂', 'start': 298, 'end': 300, 'probability': 0.7476355950447982, 'bbox': [[427, 585, 483, 621]] }], '批号': [{ 'text': '20 19', 'start': 174, 'end': 179, 'probability': 0.39038827330547576, 'bbox': [[1351, 428, 1435, 478]] }, { 'text': '6A938', 'start': 348, 'end': 353, 'probability': 0.5715552297421027, 'bbox': [[1321, 651, 1413, 687]] }, { 'text': '6A937', 'start': 271, 'end': 276, 'probability': 0.7490743219188651, 'bbox': [[1328, 575, 1408, 609]] }] }],
        [{ '规格': [{ 'text': '1mg', 'start': 594, 'end': 597, 'probability': 0.7216469519770499, 'bbox': [[424, 1137, 482, 1171]] }, { 'text': '按环丙沙星计100ml：环丙沙星0.2g与氯化钠0.9g', 'start': 1122, 'end': 1150, 'probability': 0.7395196421530805, 'bbox': [[354, 1861, 840, 1897]] }], '数量': [{ 'text': '1,600PCE', 'start': 606, 'end': 614, 'probability': 0.9339858276482893, 'bbox': [[899, 1178, 1010, 1205]] }], '剂型': [{ 'text': '注射剂', 'start': 798, 'end': 801, 'probability': 0.5375014617276719, 'bbox': [[1381, 1403, 1457, 1437]] }, { 'text': '注射剂', 'start': 988, 'end': 991, 'probability': 0.6452904014624181, 'bbox': [[1381, 1670, 1457, 1704]] }], '批号': [{ 'text': 'H20 12 0368', 'start': 734, 'end': 745, 'probability': 0.44843064912430464, 'bbox': [[609, 1345, 821, 1407]] }, { 'text': 'BXHP7V12', 'start': 809, 'end': 817, 'probability': 0.7075272776278609, 'bbox': [[1039, 1439, 1168, 1479]] }], '批准文号': [{ 'text': 'H20160679', 'start': 750, 'end': 759, 'probability': 0.6091007977203162, 'bbox': [[385, 1367, 531, 1399]] }, { 'text': 'H20130665', 'start': 1155, 'end': 1164, 'probability': 0.9454837324190208, 'bbox': [[384, 1902, 528, 1933]] }] }],
        [{ '规格': [{ 'text': '醋酸环丙孕酮2mg和炔雌醇0.035mg', 'start': 756, 'end': 776, 'probability': 0.6060140952164161, 'bbox': [[353, 1333, 724, 1365]] }], '数量': [{ 'text': '100PCE', 'start': 825, 'end': 831, 'probability': 0.7467942617292351, 'bbox': [[905, 1445, 1000, 1479]] }, { 'text': '720PCE', 'start': 631, 'end': 637, 'probability': 0.9208291922325671, 'bbox': [[900, 1178, 1000, 1212]] }], '有效期': [{ 'text': '11/2017/09/05', 'start': 211, 'end': 224, 'probability': 0.906617871744487, 'bbox': [[1054, 442, 1242, 473]] }, { 'text': '20211106', 'start': 641, 'end': 649, 'probability': 0.6013223278963693, 'bbox': [[1186, 1175, 1296, 1209]] }], '剂型': [{ 'text': '片剂', 'start': 614, 'end': 616, 'probability': 0.9243802164045185, 'bbox': [[1374, 1136, 1430, 1173]] }], '批号': [{ 'text': '345A', 'start': 637, 'end': 641, 'probability': 0.8812643731803718, 'bbox': [[1037, 1180, 1100, 1209]] }, { 'text': 'TU01GL1', 'start': 831, 'end': 838, 'probability': 0.8686638577126473, 'bbox': [[1037, 1445, 1142, 1479]] }], '批准文号': [{ 'text': 'H20140237', 'start': 969, 'end': 978, 'probability': 0.3691681321234057, 'bbox': [[378, 1641, 523, 1673]] }, { 'text': 'H20170209', 'start': 781, 'end': 790, 'probability': 0.9104818923433555, 'bbox': [[380, 1369, 533, 1406]] }] }],
        [{ '规格': [{ 'text': '50MG/12.5MG', 'start': 493, 'end': 504, 'probability': 0.49892196627607177, 'bbox': [[870, 703, 1050, 737]] }, { 'text': '50MGX7', 'start': 419, 'end': 425, 'probability': 0.8957179106711095, 'bbox': [[865, 662, 1035, 703]] }, { 'text': '5MGX5S', 'start': 571, 'end': 577, 'probability': 0.368434224291061, 'bbox': [[858, 773, 1050, 814]] }], '生产日期': [{ 'text': '2018-11-01', 'start': 624, 'end': 634, 'probability': 0.9715010168283698, 'bbox': [[1786, 768, 1989, 814]] }], '单价': [{ 'text': '33.7307', 'start': 431, 'end': 438, 'probability': 0.9272358679567105, 'bbox': [[1240, 656, 1375, 706]] }], '有效期': [{ 'text': '2019-10-25', 'start': 455, 'end': 465, 'probability': 0.9998024158625611, 'bbox': [[1793, 656, 1979, 703]] }, { 'text': '2018-11-22', 'start': 702, 'end': 712, 'probability': 0.9381017212195601, 'bbox': [[1788, 806, 1988, 853]] }], '剂型': [{ 'text': '氢沙坦钾/氢氯暖嗪（海捷亚）片/片剂', 'start': 534, 'end': 552, 'probability': 0.40852048974895183, 'bbox': [[412, 705, 772, 739]] }], '批号': [{ 'text': '00061', 'start': 450, 'end': 455, 'probability': 0.5818751281220003, 'bbox': [[1662, 659, 1757, 701]] }] }],
        [{ '商品名称': [{ 'text': '吗替麦考酚酯胶囊', 'start': 432, 'end': 440, 'probability': 0.8572522570461203, 'bbox': [[553, 1111, 702, 1150]] }, { 'text': '骨化三醇胶丸', 'start': 585, 'end': 591, 'probability': 0.4602187028514493, 'bbox': [[550, 1297, 659, 1333]] }], '规格': [{ 'text': '0.25g', 'start': 416, 'end': 421, 'probability': 0.8770557974983717, 'bbox': [[1065, 1094, 1133, 1125]] }], '数量': [{ 'text': '1,000.000', 'start': 491, 'end': 500, 'probability': 0.9334913358710395, 'bbox': [[1247, 1190, 1345, 1217]] }], '产地/生产厂家': [{ 'text': '沈阳', 'start': 249, 'end': 251, 'probability': 0.6026205350489988, 'bbox': [[977, 744, 1038, 773]] }], '单价': [{ 'text': '15.999', 'start': 500, 'end': 506, 'probability': 0.9496377894642087, 'bbox': [[1545, 1193, 1617, 1227]] }], '金额': [{ 'text': '-91.589.18', 'start': 457, 'end': 467, 'probability': 0.6962022994183314, 'bbox': [[2056, 1142, 2173, 1176]] }, { 'text': 'S72,460.00', 'start': 447, 'end': 457, 'probability': 0.40726751362132063, 'bbox': [[2053, 1108, 2176, 1148]] }], '有效期': [{ 'text': '24.07.2017', 'start': 194, 'end': 204, 'probability': 0.3384928649574377, 'bbox': [[1849, 621, 1991, 654]] }, { 'text': '28.02.2019', 'start': 608, 'end': 618, 'probability': 0.9193215213837576, 'bbox': [[597, 1357, 746, 1393]] }], '剂型': [{ 'text': '胶囊剂', 'start': 413, 'end': 416, 'probability': 0.9992945980879249, 'bbox': [[967, 1094, 1038, 1120]] }, { 'text': '胶囊剂', 'start': 563, 'end': 566, 'probability': 0.5918605337555505, 'bbox': [[966, 1272, 1039, 1312]] }], '批号': [{ 'text': 'SH0237', 'start': 599, 'end': 605, 'probability': 0.9956838703100175, 'bbox': [[463, 1357, 552, 1393]] }] }]
      ],
      title_list: ['商品名称', '规格', '数量', '生产日期', '产地/生产厂家', '单位', '件数', '单价', '金额', '编号', '有效期', '剂型', '批号', '批准文号'],
      // url_list: [this.basic_msg[0].pic_url],
      basic_msg: [
        {
          id: 1,
          name: '波立维6A937',
          timestamp: '2024-4-09 04:32:27',
          pic_url: require('C:/Users/yoghurts/Desktop/软工综训/result/波立维6A937_result.jpg'),
          title: '这是一段描述',
          author: 'Mary',
          status: 'Published'
        },
        {
          id: 2,
          name: '补佳乐338A',
          timestamp: '2024-5-01 04:32:27',
          pic_url: require('C:/Users/yoghurts/Desktop/软工综训/result/补佳乐338A_result.jpg'),
          title: '这是一段描述',
          author: 'Mike',
          status: 'Published'
        },
        {
          id: 3,
          name: '达英-35345A',
          timestamp: '2024-5-03 04:32:27',
          pic_url: require('C:/Users/yoghurts/Desktop/软工综训/result/达英-35345A_result.jpg'),
          title: '这是一段描述',
          author: 'Evan',
          status: 'Published'
        },
        {
          id: 4,
          name: '海捷亚N004832',
          timestamp: '2024-5-04 04:32:27',
          pic_url: require('C:/Users/yoghurts/Desktop/软工综训/result/海捷亚N004832_result.jpg'),
          title: '这是一段描述',
          author: 'Yoghurt',
          status: 'Published'
        },
        {
          id: 5,
          name: '罗盖全SH0237',
          timestamp: '2024-5-02 04:32:27',
          pic_url: require('C:/Users/yoghurts/Desktop/软工综训/result/罗盖全SH0237_result.jpg'),
          title: '这是一段描述',
          author: 'Yoghurt',
          status: 'Published'
        }
      ],
      tableKey: 0,
      list: null,
      total: 5,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 20,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id'
      },
      importanceOptions: [1, 2, 3],
      calendarTypeOptions,
      sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
      statusOptions: ['published', 'draft', 'deleted'],
      showReviewer: false,
      temp: {
        id: undefined,
        importance: 1,
        remark: '',
        timestamp: new Date(),
        title: '',
        type: '',
        status: 'published'
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: 'Edit',
        create: 'Create'
      },
      dialogPvVisible: false,
      pvData: [],
      rules: {
        type: [{ required: true, message: 'type is required', trigger: 'change' }],
        timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
        title: [{ required: true, message: 'title is required', trigger: 'blur' }]
      },
      downloadLoading: false
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    handleRow(row) {
      this.newDialogFormVisible = true
      this.current_result_idx = row.index
    },
    tableRowClassName({ row, rowIndex }) {
      // 把每一行的索引放进row
      row.index = rowIndex
    },
    view_pie(row_idx) {
      const attributes_list = Object.keys(this.data_list[row_idx][0])
      const echart_doc = document.getElementById('newEcharts')
      const myChart = echarts.init(echart_doc)
      // 绘制图表
      var option = {
        title: {
          text: '属性分布',
          left: 'center'
        },
        legend: {
          top: 'bottom'
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [20, 120],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: []
          }
        ]
      }
      const avg_value = 100 / attributes_list.length
      for (var i = 0; i < attributes_list.length; i++) {
        var temp = { value: avg_value, name: attributes_list[i] }
        option.series[0].data.push(temp)
      }
      myChart.setOption(option)
    },
    view_bar(row_idx) {
      console.log(this.data_list)
      var chartDom = document.getElementById('newEcharts_Bar')
      var myChart = echarts.init(chartDom)
      var maxlength = 0
      for (const key in this.data_list[row_idx][0]) {
        if (this.data_list[row_idx][0][key].length > maxlength) {
          maxlength = this.data_list[row_idx][0][key].length
        }
      }
      var dimensions = []
      var series = []
      dimensions.push('product')
      for (var i = 1; i <= maxlength; i++) {
        dimensions.push('probability' + i.toString())
        series.push({ type: 'bar' })
      }
      var source = []
      for (const key in this.data_list[row_idx][0]) {
        var temp = {}
        temp['product'] = key
        for (let l = 0; l < this.data_list[row_idx][0][key].length; l++) {
          temp['probability' + (l + 1).toString()] = Number(this.data_list[row_idx][0][key][l]['probability'])
        }
        source.push(temp)
      }
      var option = {
        title: {
          text: '预测概率',
          left: 'center'
        },
        dataZoom: [
          {
            id: 'dataZoomX',
            type: 'slider',
            xAxisIndex: [0],
            filterMode: 'filter',
            height: '3%'
          },
          {
            id: 'dataZoomY',
            type: 'slider',
            yAxisIndex: [0],
            filterMode: 'empty',
            width: '3%'
          }
        ],
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: { top: 'bottom' },
        tooltip: {},
        dataset: {
          dimensions: [],
          source: []
        },
        xAxis: { type: 'category' },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: []
      }
      option.dataset.dimensions = dimensions
      option.dataset.source = source
      option.series = series
      myChart.setOption(option)
    },
    view_tree(row_idx) {
      const data = this.data_list[row_idx][0]
      var structure = { name: 'predict structure' }
      structure['children'] = []
      for (const key in data) {
        var temp = { name: key, children: [] }
        for (let i = 0; i < data[key].length; i++) {
          var child = { name: data[key][i]['text'], value: data[key][i]['probability'] }
          temp['children'].push(child)
        }
        structure['children'].push(temp)
      }
      var chartDom = document.getElementById('newEcharts_Tree')
      var myChart = echarts.init(chartDom)
      var option = {
        title: {
          text: '预测结构',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
        toolbox: {
          show: true,
          left: 20,
          top: 20,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            type: 'tree',
            data: [],
            top: '10%',
            left: '20%',
            bottom: '1%',
            right: '20%',
            symbolSize: 7,
            label: {
              position: 'left',
              verticalAlign: 'middle',
              align: 'right',
              fontSize: 9
            },
            leaves: {
              label: {
                position: 'right',
                verticalAlign: 'middle',
                align: 'left'
              }
            },
            emphasis: {
              focus: 'descendant'
            },
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750
          }
        ]
      }
      option.series[0].data.push(structure)
      myChart.setOption(option)
    },
    initEcharts(row_idx) {
      this.view_pie(row_idx)
      this.view_bar(row_idx)
      this.view_tree(row_idx)
    },
    open(idx) {
      this.$nextTick(() => {
        this.initEcharts(idx)
      })
    },
    getList() {
      // this.$store.dispatch('user/getModelInfo').then((res) => {
      //   console.log(res)
      //   this.list = res
      //   this.total = this.list.length
      //   this.listLoading = false
      // }).catch(res => {
      //   console.log(res)
      // })
      // this.total = 4
      // this.list = [
      //   {
      //     id: 1,
      //     dataset_name: '测试模型1',
      //     timestamp: '2024-4-09 04:32:27',
      //     title: '这是测试模型1的描述，作为管理员，我希望可以更新系统的数据集，以便专业用户使用数据集。',
      //     author: 'Mary',
      //     status: 'Published'
      //   },
      //   {
      //     id: 2,
      //     dataset_name: '测试模型2',
      //     timestamp: '2024-5-01 04:32:27',
      //     title: '这是测试模型2的描述，作为管理员，我希望可以更新系统的模型，以便专业用户使用模型',
      //     author: 'Mike',
      //     status: 'Pending'
      //   },
      //   {
      //     id: 3,
      //     dataset_name: '测试模型3',
      //     timestamp: '2024-5-03 04:32:27',
      //     title: '这是测试模型3的描述，作为管理员，我希望可以更新系统的模型，以便专业用户使用模型',
      //     author: 'Evan',
      //     status: 'Pending'
      //   },
      //   {
      //     id: 4,
      //     dataset_name: '测试模型4',
      //     timestamp: '2024-5-04 04:32:27',
      //     title: '这是测试模型4的描述，作为管理员，我希望可以更新系统的模型，以便专业用户使用模型',
      //     author: 'Yoghurt',
      //     status: 'Pending'
      //   },
      //   {
      //     id: 5,
      //     dataset_name: '测试模型5',
      //     timestamp: '2024-5-02 04:32:27',
      //     title: '这是测试模型5的描述，作为管理员，我希望可以更新系统的模型，以便专业用户使用模型',
      //     author: 'Yoghurt',
      //     status: 'Deleted'
      //   },
      //   {
      //     id: 6,
      //     dataset_name: '测试模型6',
      //     timestamp: '2024-5-03 04:32:27',
      //     title: '这是测试模型6的描述，作为管理员，我希望可以更新系统的模型，以便专业用户使用模型',
      //     author: 'Evan',
      //     status: 'Pending'
      //   },
      //   {
      //     id: 7,
      //     dataset_name: '测试模型7',
      //     timestamp: '2024-5-04 04:32:27',
      //     title: '这是测试模型7的描述，作为管理员，我希望可以更新系统的模型，以便专业用户使用模型',
      //     author: 'Yoghurt',
      //     status: 'Pending'
      //   },
      //   {
      //     id: 8,
      //     dataset_name: '测试模型8',
      //     timestamp: '2024-5-02 04:32:27',
      //     title: '这是测试模型8的描述，作为管理员，我希望可以更新系统的模型，以便专业用户使用模型',
      //     author: 'Yoghurt',
      //     status: 'Deleted'
      //   }
      // ]
    },
    handleFilter() {
      this.listQuery.page = 1
      // this.getList()
    },
    handleModifyStatus(row, status) {
      this.$message({
        message: '操作成功',
        type: 'success'
      })
      row.status = status
    },
    sortChange(data) {
      const { prop, order } = data
      if (prop === 'id') {
        this.sortByID(order)
      }
    },
    sortByID(order) {
      if (order === 'ascending') {
        this.listQuery.sort = '+id'
      } else {
        this.listQuery.sort = '-id'
      }
      this.handleFilter()
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        importance: 1,
        remark: '',
        timestamp: new Date(),
        title: '',
        status: 'published',
        type: ''
      }
    },
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
          this.temp.author = 'vue-element-admin'
          createArticle(this.temp).then(() => {
            this.list.unshift(this.temp)
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    handleUpdate(row) {
      this.temp = Object.assign({}, row) // copy obj
      this.temp.timestamp = new Date(this.temp.timestamp)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
          updateArticle(tempData).then(() => {
            const index = this.list.findIndex(v => v.id === this.temp.id)
            this.list.splice(index, 1, this.temp)
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '更新成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    handleDelete(row, index) {
      this.$notify({
        title: '成功',
        message: '删除成功',
        type: 'success',
        duration: 2000
      })
      this.list.splice(index, 1)
    },
    handleFetchPv(pv) {
      fetchPv(pv).then(response => {
        this.pvData = response.data.pvData
        this.dialogPvVisible = true
      })
    },
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
        const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
        const data = this.formatJson(filterVal)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: 'table-list'
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal) {
      return this.list.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },
    getSortClass: function(key) {
      const sort = this.listQuery.sort
      return sort === `+${key}` ? 'ascending' : 'descending'
    }
  }
}
</script>
